<template>
	<view class="message-detail"  :style="{ marginTop: `${isFocus ? keyHei-20 : 0}px`}">
		<view class="top">
			<view class="info">
				<uni-icons type="left" size="25" color="#ffffff" @click="toBackPage">
				</uni-icons>
				<view class="avatar">
					<image mode="aspectFill" :src="userInfo.avatar"></image>
				</view>
				<view class="nickname">{{ userInfo.nickname }}</view>
			</view>
			<uni-icons style="margin-right: 20rpx;" type="search" size="30" color="#ffffff" @click="toSearch">
			</uni-icons>
		</view>

		<!-- 申请交流卡片 -->
		<view v-if="conversation.type === 'C2C' && conversation.applyList.length !== 0 && conversation.status < 1" class="c2c-apply-message">
			<view v-for="trueMessage in conversation.applyList" :key="trueMessage.title" class="custom-message-v2">
				<view class="info">
					<view class="title">{{ trueMessage.title }}</view>
					<view class="intro">{{ trueMessage.intro }}</view>
					<view class="from">来自 {{ trueMessage.from.name }}</view>
				</view>
				<view class="content">
					{{ trueMessage.content }}
				</view>
				<view class="options">
					<view class="option" @click="agreeConversation">
						同意交流
					</view>
				</view>
			</view>
		</view>

		<TUI-message-list id="message-list" ref="messageList" :conversation="conversation" />

		<view class="comment-input" :style="{ 'margin-bottom' : isFocus ? '30rpx' : '0' }">
			<view class="content" v-bind:style="{ height:40+Math.trunc(messageInput.length/16)*40 + 'rpx' }">
				<textarea :show-confirm-bar="false" v-bind:style="{ height:60+Math.trunc(messageInput.length/16)*40 + 'rpx' }"
					placeholder="输出你的思考" v-model="messageInput" />
			</view>
			<view class="message-button" @click="sendMessage()">发送</view>
		</view>
	</view>
</template>

<script>
	import TUIMessageList from '@/components/tui-chat/message-list/index'
	import TUIMessageInput from '@/components/tui-chat/message-input/index'
	import TUIGroupProfile from '@/components/tui-group/group-profile/index'
	export default {
		components: {
			TUIMessageList,
			TUIMessageInput,
			TUIGroupProfile,
		},
		data() {
			return {
				userInfo: {
					id: "",
					avatar: "https://ekin-1010.oss-cn-beijing.aliyuncs.com/avatar.png",
					nickname: "带着脑子去流浪"
				},
				isGroup: false,
				isFocus: false,
				keyHei: 0,
				messageInput: "",
				conversation: {
					type: 'C2C',
					status: 0,
					applyList: [{
						title: '标题',
						intro: '这是关于信息的介绍这是关于信息的介绍这是关于信息的介绍这是关于信息的介绍这是关于信息的介绍这是关于信息的介绍',
						from: {
							name: '某个发布浪屿',
							type: 'post-island',
							id: 'postIslandId1234',
						},
						isLink: false,
						content: '随附的备注聊天随附的备注聊天随附的备注聊天随附的备注聊天随附的备注聊天随附的备注聊天随附的备注聊天随附的备注聊天随附的备注聊天随附的备注聊天',
					}],
				},
				conversationID: '',
				originHeight: 0,
			}
		},
		onLoad(options) {
			// conversationID: C2C、 GROUP
			const {
				conversationID
			} = options
			this.conversationID = conversationID
			uni.$TUIKit.setMessageRead({
					conversationID,
				}).then(() => {
					logger.log('TUI-chat | setMessageRead  | ok')
				})
			uni.$TUIKit.getConversationProfile(conversationID).then((res) => {
				const {
					conversation
				} = res.data
				this.conversation = conversation
				this.conversationName = this.getConversationName(conversation)
				this.isGroup = conversation.type === 'GROUP'
			})
			uni.onKeyboardHeightChange((res) => {
				this.keyHei = res.height
			})
			
			
			// #ifdef H5
			if (this.sysInfo.osName.includes('ios')) {
				// ios webview 会滚动
				document.getElementsByClassName('message-detail')[0].addEventListener('scroll', (e) => { 
					if (!this.keyHei) {
						this.keyHei = document.getElementsByClassName('message-detail')[0].scrollTop - 24
					}
				}, false);
			} else {
				// android webview 会被挤压，可以监听 window resize 判断键盘弹出
				this.originHeight = document.documentElement.clientHeight || document.body.clientHeight
				window.addEventListener('resize', () => { 
					const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
					if (resizeHeight < this.originHeight) { 
						this.keyHei = this.originHeight - resizeHeight - 24
					}
				}, false);
			}
			// #endif
		},
		unmounted() {
			// #ifdef H5
			if (this.sysInfo.osName.includes('ios')) {
				window.removeEventListener('scroll')
			} else {
				window.removeEventListener('resize')
			}
			// #endif
		},
		methods: {
			getConversationName(conversation) {
				if (conversation.type === '@TIM#SYSTEM') {
					this.showChat= false
					return '系统通知'
				}
				if (conversation.type === 'C2C') {
					return (
						conversation.remark ||
						conversation.userProfile.nick ||
						conversation.userProfile.userID
					)
				}
				if (conversation.type === 'GROUP') {
					return (
						conversation.groupProfile.name || conversation.groupProfile.groupID
					)
				}
			},

			sendMessage(message) {
				const {
					conversationID,
					conversationType
				} = this.conversation
				if (!message) {
					// todo: 信息需要修改
					message = {
						ID: 'messageid123142',
						type: 'TIMTextElem',
						payload: {
							text: this.messageInput,
						},
						conversationID,
						conversationType,
						to: 'modexbean',
						from: 'administrator',
						flow: 'out',
						time: 1673311808,
					}
				}
				console.log("发送消息",message)
				// 调用发送
				uni.$TUIKit.sendMessage(message).then((res) => {
					// 将自己发送的消息写进消息列表里面
					this.$refs.messageList.updateMessageList()
					this.messageInput = ''
				}).catch((error) => {})
				// 下面是不走请求的mock发送
				this.$refs.messageList.updateMessageList(message)
				this.messageInput = ''
			},
			toFocus() {
				this.isFocus = !this.isFocus
			},
			toBackPage() {
				uni.navigateBack()
			},
			toSearch() {
				uni.navigateTo({
					url: "/pages/search/search"
				})
			},
			agreeConversation() {
				// 发送请求
				// 成功后将自定义信息发送，更改状态
				this.conversation.status = 1
				const message = this.conversation.applyList.pop()
				this.sendMessage({
				  ID: '1234',
				  type: 'TIMCustomV2Elem',
				  payload: {
						...message,
						options: [{
							name: '是否接受',
							disabledName: '已接受',
							disabled: true
						}],
				  },
				  conversationID: 'conversationID123',
				  conversationType: 'C2C',
				  to: '',
				  from: '',
				  flow: 'out',
				  time: 1673311808,
				  status: 'success',
				  isRevoked: false,
				  nick: ''
				})
			}
		},
		watch: {
			keyHei(val) {
				console.log('keyHei change!', val)
				if (val) {
					this.isFocus = true
				} else {
					this.isFocus = false
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.message-detail {
		display: flex;
		flex-direction: column;
		align-items: center;


		.top {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			padding: 100rpx 0 20rpx 0;

			position: sticky;
			top: 0;
			z-index: 2;

			background-color: #6AB9C0;
			border-bottom: solid thin #6AB9C0;


			.info {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				margin-left: 20rpx;

				.avatar {
					height: 100rpx;
					width: 100rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-left: 20rpx;
					border: solid white;
				}

				.nickname {
					font-size: 36rpx;
					margin-left: 20rpx;
					color: white;
				}
			}


		}


		.messages {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			margin-left: 20px;
			margin-right: 20px;
			margin-top: 10rpx;


			.message {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				width: 680rpx;
				margin: 20rpx;


				.message-content {
					padding: 20rpx;
					background-color: #6AB9C0;
					border-radius: 10rpx;
					color: white;
				}

			}

			.message-to {
				justify-content: flex-end;

				.message-content {
					background-color: #ebebeb;
					color: #2c2c2c;
				}

			}
		}



		.comment-input {
			width: 710rpx;
			background-color: #f5f5f5;

			position: fixed;
			bottom: 0;
			z-index: 2;


			display: flex;
			flex-direction: row;
			align-items: flex-end;
			justify-content: space-between;


			padding: 30rpx 20rpx;
			border-top: 1px solid #d5d5d5;

			.content {
				background-color: #FFFFFF;
				border-radius: 10rpx;
				width: 520rpx;
				padding: 20rpx;
				height: 80rpx;


				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}

			.message-button {
				width: 120rpx;
				height: 60rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;

				background-color: #6AB9C0;


				font-size: 32rpx;
				color: white;
				border-radius: 10rpx;
				margin-bottom: 10rpx;
			}
		}

		image {
			height: 100%;
			width: 100%;
		}
	}

	.custom-message-v2 {
		margin-top: 20rpx;
		width: 88vw;
		line-height: 52rpx;
		padding: 24rpx 24rpx 20rpx;
		background: #F8F8F8;
		border-radius: 10px;
		box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.3);
	}

	.custom-message-v2 .info {
		padding-left: 8rpx;
		border-left: 4rpx solid #A6A6A6;
		line-height: 1.5;
	}

	.info .intro {
		font-size: 24rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #A6A6A6;
	}

	.info .from {
		font-size: 24rpx;
	}

	.custom-message-v2 .content {
		margin-top: 12rpx;
	}

	.custom-message-v2 .options {
		display: flex;
		justify-content: space-between;
		margin-top: 12rpx;
	}

	.option {
		flex: 1;
		border-radius: 10rpx;
		background-color: #6AB9C0;
		text-align: center;
		color: white;
		font-weight: 500;
		line-height: 2.5;
	}

	.option.disabled {
		background-color: #a6a6a6;
	}
</style>
